<template>
  <div>
    <div class="swiper">
      <!-- <PicZoom :url="imgUrlList?.[0]" :scale="3" ></PicZoom> -->
      <div class="img-box">
        <!-- <img v-if="!(file && imgActiveIndex == 0)" :src="image" class="img" /> -->
        <!-- <PicZoom class="img" v-if=" !(file && imgActiveIndex == 0) " :url="image"  :scale="1.5" ></PicZoom> -->

        <imgZoom
          v-if="!(file && imgActiveIndex == 0)"
          class="img"
          :images="image"
        />
        <video
          class="img"
          v-if="file && imgActiveIndex == 0"
          :poster="imgUrlList?.[0]"
          controls
        >
          <source :src="file" type="video/mp4" />
        </video>
      </div>

      <div class="bottom-box">
        <div class="left" @click="imgLeft()">
          <div class="ic"></div>
        </div>

        <div class="Img_ul">
          <span
            v-for="(item, index) in imgUrlList"
            :key="index"
            class="Img_li"
            :style="imgStyle"
            @click="changeImg(item, index)"
          >
            <img
              :class="
                index === imgActiveIndex ? 'img_activeBorder' : 'imgBorder'
              "
              :src="item"
            />
          </span>
        </div>

        <div class="right" @click="imgRight()">
          <div class="ic"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import imgZoom from "./img-zoom.vue";
// import PicZoom from "vue-piczoom";
export default {
  components: {
    // PicZoom
    imgZoom,
  },
  props: {
    mainImgUrl: String,
    imgUrlList: Array,
    file: {
      // 视频文件
      type: String,
      default: "",
    },
  },
  data() {
    return {
      image: this.mainImgUrl,

      imgActiveIndex: 0, // 当前移动图片的索引值
      imgDistance: 0, // 移动的距离
      allDistance: 0, // 总移动距离
    };
  },
  computed: {
    imgStyle() {
      return {
        transform: `translate3d(${this.imgDistance}px, 0, 0)`, // 计算移动的距离(x,y,z)
      };
    },
  },
  watch: {
    mainImgUrl() {
      this.image = this.mainImgUrl;
    },
  },
  mounted() {
    this.image = this.mainImgUrl;
    //this.image = this.mainImgUrl;
    // console.log('this.image')
    // console.log(this.mainImgUrl)
  },
  methods: {
    changeImg(item, index) {
      this.image = item;
      this.imgActiveIndex = index;
    },
    imgLeft() {
      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex--; // 索引值-1
        this.imgUrlList.forEach((item, index) => {
          // 循环小图,通过判断索引值赋值给大图
          if (this.imgActiveIndex === index) {
            this.image = item;
          }
        });
      }
      if (this.imgActiveIndex >= 2) {
        var index = 0;
        const temp = window.setInterval(() => {
          // 利用定时器实现图片左右移动的动画效果
          if (index < 61.5) {
            // 移动次数(33次)
            this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++;
            return;
          } else {
            window.clearInterval(temp); // 移动完清除定时器
          }
        }, 10);
      }
    },
    imgRight() {
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++;
        this.imgUrlList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.image = item;
          }
        });
        if (this.imgActiveIndex >= 3) {
          this.allDistance = -138 * (this.imgActiveIndex - 2);
          var index = 0;
          const temp = window.setInterval(() => {
            if (index < 69) {
              this.imgDistance -= 2; // 每次向右移动的距离
              index++;
              return;
            } else {
              window.clearInterval(temp);
            }
          }, 10);
        }
      } else if (this.imgActiveIndex === this.imgUrlList.length - 1) {
        // 到达最后一张图片，再点击跳转回第一张
        this.imgActiveIndex = 0;
        this.image = this.imgUrlList[0];
        let index = 0;
        const temp = window.setInterval(() => {
          // 利用定时器实现图片左右移动的动画效果
          if (index < Math.abs(this.allDistance / 2)) {
            // 取绝对值再除
            this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++;
            return;
          } else {
            window.clearInterval(temp); // 移动完清除定时器
          }
        }, 1);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper {
  // width: 460px;
  // height: 342px;
  // position: relative;
  overflow: initial;

  .img-box {
    @include fn.scale(460px);

    .img {
      @include fn.cover;
      position: relative;
    }
  }

  .bottom-box {
    margin-top: 11px;
    width: 460px;
    height: 78px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      margin-right: 4px;
      width: 19px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:hover {
        background: color.$base;

        .ic {
          background-image: url(../assets/image/home/ic_left_white.png);
        }
      }

      .ic {
        display: flex;
        width: 14px;
        height: 16px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../assets/image/home/ic_left.png);
      }
    }

    .right {
      margin-left: 4px;
      width: 19px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:hover {
        background: color.$base;

        .ic {
          background-image: url(../assets/image/home/ic_right_white.png);
        }
      }

      .ic {
        width: 12px;
        height: 14px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../assets/image/home/ic_right.png);
      }
    }

    .a {
      background: #0dcc73;
    }
  }
}

.Img_ul {
  position: relative;
  display: flex;
  flex: 1 0;
  height: 78px;
  overflow: hidden;
  list-style: none;
}

.Img_li {
  box-sizing: border-box;
  // float: left;
  margin: 0 2px;
  cursor: pointer;

  img {
    object-fit: cover;
  }
}
.imgBorder {
  @include fn.scale(132px);
  border: 1px solid #fff;
}
.img_activeBorder {
  @include fn.scale(132px);
  border: 1px solid color.$base;
}
</style>
